import { Button, Table, Popconfirm } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMemo, useContext } from 'react'
import { useRecoilValue } from 'recoil'
import styles from './index.module.less'
import EventTitle from '@/components/EventTitle'
import IconSvg from '@/components/IconSvg'
import { IPressure } from '@/@types/common'
import { dictValues } from '@/store/dicts'

interface TableEvent {
  list: IPressure[]
  txt: string
  handlePreview: (info: IPressure) => void
  setShowEventModal: () => void
  readOnly: boolean
  deleteHandle: (value: IPressure) => void
}

export default (props: TableEvent) => {
  const dictValuesList = useRecoilValue(dictValues)
  const { list, txt, handlePreview, setShowEventModal, readOnly, deleteHandle } = props
  // 样式
  const computedColor = (status: number) => {
    switch (status) {
      case 1:
        return {
          backgroundColor: '#EEFFFB',
          color: '#51BCA5',
        }
      case 2:
        return {
          backgroundColor: '#FFF1F2',
          color: '#EB5F62',
        }
      case 3:
        return {
          backgroundColor: '#F2F2F2',
          color: '#8E8E8E',
        }

      default:
        break
    }
  }

  const columns: ColumnsType<IPressure> = useMemo(
    () => [
      // {
      //   title: '序号',
      //   align: 'center',
      //   render: (text, record, index) => index + 1,
      // },
      {
        title: '发生病区',
        dataIndex: 'happenAreaName',
        align: 'center',
      },
      {
        title: '住院患者病案号',
        dataIndex: 'patientNumber',
        align: 'center',
      },
      {
        title: '入院时间',
        dataIndex: 'admissionTime',
        align: 'center',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        align: 'center',
        render: (value) => dictValuesList.sex.find((item) => item.value === `${value}`)?.label,
      },
      {
        title: '年龄',
        dataIndex: 'age',
        align: 'center',
        render: (value) => dictValuesList.age.find((item) => item.value === `${value}`)?.label,
      },
      // {
      //   title: '状态',
      //   dataIndex: 'status',
      //   align: 'center',
      //   render: (value) => (
      //     <div className={styles.tag} style={computedColor(value)}>
      //       {dictValuesList.report_status.find((item) => item.value === value)?.label}
      //     </div>
      //   ),
      // },
      {
        title: '操作',
        align: 'center',
        render: (_, record) => (
          <div className={styles.btns}>
            <Button
              type='link'
              onClick={() => handlePreview(record)}
              icon={<IconSvg name={readOnly ? 'look-detail' : 'edit'} />}
            >
              {readOnly ? '查看' : '编辑'}
            </Button>
            {!readOnly && (
              <Popconfirm onConfirm={() => deleteHandle(record)} title='确定删除吗？' okText='确定' cancelText='取消'>
                <Button danger type='link'>
                  删除
                </Button>
              </Popconfirm>
            )}
          </div>
        ),
      },
    ],
    [],
  )

  return (
    <div>
      <div className={styles.title}>
        <EventTitle text={txt} style={{ flex: 1 }} />
        {true && (
          <div className={styles.btnWrapper}>
            {!readOnly && (
              <Button
                onClick={() => setShowEventModal()}
                icon={<IconSvg name='lead-into' style={{ marginRight: '8px' }} />}
                style={{ marginRight: '16px' }}
              >
                新增事件数据
              </Button>
            )}
            {/* <UploadEvent {...importEventParams} /> */}
          </div>
        )}
      </div>

      <Table style={{ marginTop: '24px' }} pagination={false} columns={columns} dataSource={list} rowKey={'id'} />
    </div>
  )
}
